<template>
  <div>
    <charts :option="option"></charts>
  </div>
</template>

<script>
import charts from "./charts.vue";
import { mapState } from "vuex";
export default {
  components: { charts },
  name: "ChartRightLine",
  data() {
    return {
      option: {},
      allData: [], // 服务器获取的所有数据
    };
  },
  mounted() {
    this.updateChart();
  },
  computed: {
    ...mapState({ RightLine: "RightLine" }),
  },
  watch: {
    RightLine: {
      deep: true,
      handler(a, b) {
        this.updateChart();
      },
    },
  },

  methods: {
    // async getData() {
    //   await this.$http.get("charts/line/getRight").then((res) => {
    //     this.allData = res.data.data.list;
    //     this.updateChart();
    //   });
    // },
    updateChart() {
      let t = this;
      // 处理数据并且更新界面图表
      const Xdata = this.RightLine.map((item) => {
        return item.name;
      });
      const Sdata1 = this.RightLine.map((item) => {
        return item.value1;
      });
      const Sdata2 = this.RightLine.map((item) => {
        return item.value2;
      });
      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "0%",
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },

        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: Xdata,
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2",
            },
            // 填充颜色设置
            areaStyle: {
              color: new t.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
            data: Sdata1,
          },
          {
            name: "联盟广告",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new t.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: Sdata2,
          },
        ],
      };

      this.option = option;
    },
  },
};
</script>

<style lang="less" scoped>
</style>